<template>
  <div class="makerList">
    <div class="makerList_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">我的账户<i class="el-icon-close"></i></div>
    </div>
    <div class="makerList_bottom">
      <div class="new">
        <div class="shopList">
          <h3>我的账户</h3>
          <div class="topNav">
            <div
              class="shopList_serch"
              :class="{ activeNav: navStatus == 1 }"
              @click="cashoutFn"
            >
              <div class="iconfont icon">&#xe640;</div>
              <div class="priceNum">
                <span>{{ balanceInfo.cashout_amount }}元</span>
                <p>可提现</p>
              </div>
            </div>
            <div
              v-if="role == 'shop'"
              class="shopList_serch"
              :class="{ activeNav: navStatus == 2 }"
              @click="waitSettFn"
            >
              <div class="iconfont icon1">&#xe68d;</div>
              <div class="priceNum">
                <span>{{ balanceInfo.wait_settlement_amount }}元</span>
                <p>待结算</p>
              </div>
            </div>
            <div
              v-if="role != 'shop'"
              class="shopList_serch"
              :class="{ activeNav: navStatus == 3 }"
              @click="freeFn"
            >
              <div class="iconfont icon1">&#xe68d;</div>
              <div class="priceNum">
                <span>{{ balanceInfo.freeze_amount }}元</span>
                <p>冻结金</p>
              </div>
            </div>
            <div
              v-if="role != 'shop' && role != 'designer'"
              class="shopList_serch"
              :class="{ activeNav: navStatus == 4 }"
              @click="earnFn"
            >
              <div class="iconfont icon1">&#xe68d;</div>
              <div class="priceNum">
                <span>{{ balanceInfo.earnest_amount }}元</span>
                <p>质保金</p>
              </div>
            </div>
            <!-- <div class="shopList_serch" :class="{'activeNav':navIndex==index}" v-for="(item,index) in topNav" :key="index" @click="selectNav(index)">
                            <div class="iconfont icon1">{{item.icon}}</div>
                            <div class="priceNum"><span>{{balanceInfo.wait_settlement_amount}}元</span><p>{{item.name}}</p></div>
                        </div> -->
          </div>
        </div>
      </div>

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="提现" name="1" v-if="navStatus == 1">
          <div class="makerList_table">
            <div class="makerList_bottom_table">
              <h3>提现</h3>
              <div class="Withdrawal">
                <span>提现金额</span>
                <div class="priceInfo">
                  <input
                    type=""
                    @input="outPrice"
                    v-model="amountValue"
                    placeholder="请输入提现金额"
                  />
                  <p>手续费：{{ freePrice }} 元</p>
                  <p>
                    可提现金额 {{ balanceInfo.cashout_amount }} 元
                    <span @click="toOutAll">全部提现</span>
                  </p>
                </div>
              </div>
              <div class="Withdrawal">
                <span>到账银行卡</span>
                <div class="priceInfo">
                  <el-select
                    style="width: 400px"
                    v-model="bankValue"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.id"
                      :label="item.bank_name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </div>
              </div>
            </div>
            <div class="btn">
              <el-button type="primary" @click="toRecords">提现</el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane
          label="可提现明细"
          name="2"
          v-if="navStatus == 1"
        ></el-tab-pane>
        <el-tab-pane
          label="提现明细"
          name="3"
          v-if="navStatus == 1"
        ></el-tab-pane>
        <el-tab-pane
          label="待结算明细"
          name="4"
          v-if="navStatus == 2"
        ></el-tab-pane>
        <el-tab-pane label="冻结金明细" name="5" v-if="navStatus == 3">
          <free-list ref="freeList"></free-list>
        </el-tab-pane>
        <el-tab-pane label="质保金明细" name="6" v-if="navStatus == 4">
          <earn-list ref="earnList"></earn-list>
        </el-tab-pane>
      </el-tabs>
      <div v-if="navStatus == 1 || navStatus == 2">
        <div class="tableBox" v-if="activeName != '1'">
          <div class="selectBox" v-if="activeName != '3'">
            <div class="selectBtn">
              下单时间
              <el-date-picker
                style="margin: 0 20px 0 10px"
                v-model="valueTime"
                type="daterange"
                @change="selectTime"
                range-separator="至"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
              >
              </el-date-picker>
            </div>
            <div class="searchBox">
              <div class="item">
                <div class="price_order">
                  订单数量<span>{{ order_count }}单</span>
                </div>
                <div class="price_order">
                  {{ navStatus == 1 ? "收入" : "预计收入"
                  }}<span>{{ income_sum }}元</span>
                </div>
              </div>
              <!-- <div class="item">
                <el-input
                  style="width: 50%"
                  type="text"
                  v-model="input"
                  placeholder="请输入相关信息搜索"
                ></el-input>
                <el-button type="primary" class="iconfont"
                  >&#xe68e; 搜索</el-button
                >
              </div> -->
            </div>
          </div>
          <div class="selectBox" v-if="activeName == '3'">
            状态
            <el-select
              v-model="valueType"
              @change="selectType"
              placeholder="请选择"
            >
              <el-option
                v-for="item in orderTypeList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <!-- 表格 -->
          <div class="table">
            <div class="partnerList_table">
              <div class="partnerList_bottom_table">
                <table>
                  <tr>
                    <th></th>
                    <th>序号</th>
                    <th v-for="(item, index) in thItem" :key="index">
                      {{ item }}
                    </th>
                    <th v-if="activeName == '2'">收入</th>
                    <th v-if="activeName == '4'">预计收入</th>
                  </tr>
                  <template v-if="activeName == '3'">
                    <tr v-for="(v, i) in tableList" :key="i">
                      <td>
                        <font
                          class="checkbox"
                          :class="{ check_active: checkBoxAll.includes(i) }"
                          @click="handlerCheckbox(i)"
                          ><i class="el-icon-check"></i
                        ></font>
                      </td>
                      <td>{{ v.id }}</td>
                      <td>
                        {{ $moment(v.create_time * 1000).format("yyyy-MM-DD") }}
                      </td>
                      <td>{{ v.amount }}</td>
                      <td>
                        {{
                          v.status == 0
                            ? "未批准"
                            : v.status == 1
                            ? "通过"
                            : v.status == 2
                            ? "被拒绝"
                            : v.status == 3
                            ? "已打款"
                            : v.status == 4
                            ? "取消"
                            : ""
                        }}
                      </td>
                    </tr>
                  </template>
                  <template v-else>
                    <tr v-for="(v, i) in tableList" :key="i">
                      <td>
                        <font
                          class="checkbox"
                          :class="{ check_active: checkBoxAll.includes(i) }"
                          @click="handlerCheckbox(i)"
                          ><i class="el-icon-check"></i
                        ></font>
                      </td>
                      <td>{{ v.id }}</td>
                      <td>
                        {{ $moment(v.create_time * 1000).format("yyyy-MM-DD") }}
                      </td>
                      <td>{{ v.order_no }}</td>
                      <td>{{ v.order_price }}</td>
                      <td>
                        {{
                          v.order_type == 'product_order'
                            ? "商城订单"
                            : v.order_type == 'designer_order'
                            ? "设计师订单"
                            : v.order_type == 'builder_order'
                            ? "施工方订单"
                            : v.order_type == 'pack_order'
                            ? "产品包订单"
                            :''
                        }}
                      </td>
                      <td>{{ v.store_income }}</td>
                    </tr>
                  </template>
                  <tr v-if="tableList.length == 0">
                    <td class="table_title" colspan="13">当前数据空空如也</td>
                  </tr>
                </table>
                <div class="partnerList_bottom_page">
                  <div class="partnerList_bottom_page_left">
                    <div
                      class="partnerList_bottom_page_left_checkAll"
                      @click="handerCheckAll"
                    >
                      <font class="checkbox" :class="{ check_active: checkAll }"
                        ><i class="el-icon-check"></i
                      ></font>
                    </div>
                    全选
                    <!-- <button class="partnerList_bottom_page_left_btn" @click="selectDel">删除</button> -->
                  </div>
                  <div class="partnerList_bottom_page_right">
                    <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="page"
                      :page-sizes="[10, 20, 30, 40]"
                      :page-size="pagesize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total"
                      background
                    >
                    </el-pagination>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import freeList from "@/components/publicTable/freeTable.vue";
import earnList from "@/components/publicTable/earnTable.vue";
export default {
  components: {
    freeList,
    earnList,
  },
  data() {
    return {
      tableList: [],
      input: "",
      checkAll: false,
      checkBoxAll: [], // 选中的数据
      shelvesAlls: [],
      balanceInfo: {}, //佣金信息
      income: 20000,
      commission: 5000,
      options: [],
      bankValue: null,
      amountValue: null, //提现金额
      bindCardList: [], //已绑定银行卡列表
      navStatus: 1,
      navIndex: 0,
      activeName: "1",
      valueTime: [], //时间选择
      // topNav:[{
      //     name:'可提现',
      //     icon:'\ue640',
      //     cashout_amount:''
      // },{
      //     name:'待结算',
      //     icon:'\ue68d',
      //     wait_settlement_amount:''
      // },{
      //     name:'冻结金',
      //     icon:'\ue68d',
      //     freeze_amount:''
      // },{
      //     name:'质保金',
      //     icon:'\ue68d',
      //     earnest_amount:''
      // }],

      orderTypeList: [
        {
          name: "待审核",
          value: 1,
        },
        {
          name: "被拒绝",
          value: 2,
        },
        {
          name: "已结算",
          value: 3,
        },
      ],
      valueType: "", //选择的状态
      page: 1,
      pagesize: 10,
      total: 0,
      thItem: [],
      startDate: "",
      endDate: "",
      order_count: 0, //总订单数
      income_sum: 0, //收入总计
      role: "",
    };
  },
  mounted() {
    this.role = 'shop';
    console.log(this.role == "shop");
    this.getBalance();
    // this.myChart();
    this.getBindCard();
  },
  computed: {
    freePrice() {
      let free = "0.00";
      return (free = (this.amountValue * 0.005).toFixed(2));
    },
  },
  methods: {
    // 选择可提现
    cashoutFn() {
      this.navStatus = 1;
      this.activeName = "1";
    },
    // 选择待结算
    waitSettFn() {
      this.navStatus = 2;
      this.activeName = "4";
      this.thItem = ["下单时间", "订单编号", "订单金额", "订单类型"];
      this.page = 1;
      this.pagesize =10
      this.getOrderOut(0);
    },
    // 选择冻结金
    freeFn() {
      this.navStatus = 3;
      this.activeName = "5";
      this.$nextTick(() => {
        this.$refs.freeList.getFreeList();
      });
    },
    // 选择质保金
    earnFn() {
      this.navStatus = 4;
      this.activeName = "6";
      this.$nextTick(() => {
        this.$refs.earnList.getEarnList();
      });
    },

    // // 选择navTop
    // selectNav(index){
    //     this.navIndex = index
    //     this.navStatus = index+1
    //     if(index==0){
    //         this.activeName='1'
    //     }else if(index==1){
    //         this.activeName='4'
    //         this.thItem=['下单时间','订单编号','订单金额','订单类型']
    //     }
    // },

    // 切换tabs
    handleClick(e) {
      console.log(e.name, "666666");
      if (e.name == "3") {
        this.thItem = ["提现时间", "提现金额", "状态"];
        this.page = 1;
        this.pagesize =10
        this.getOutList();
      } else {
        this.thItem = ["下单时间", "订单编号", "订单金额", "订单类型"];
      }
      if (e.name == "2") {
        this.page = 1;
        this.pagesize =10
        this.getOrderOut(1);
      } else if (e.name == "4") {
        this.page = 1;
        this.pagesize =10
        this.getOrderOut(0);
      }
    },

    // 选择时间
    selectTime() {
      this.startDate = this.valueTime?this.$moment(this.valueTime[0]).format("yyyy-MM-DD"):'';
      this.endDate = this.valueTime?this.$moment(this.valueTime[1]).format("yyyy-MM-DD"):'';
      if (this.activeName == "2") {
        this.page = 1;
        this.pagesize =10
        this.getOrderOut(1);
      } else if (this.activeName == "4") {
        this.page = 1;
        this.pagesize =10
        this.getOrderOut(0);
      }
    },

    // 选择状态
    selectType() {
      this.page = 1;
      this.pagesize =10
      this.getOutList();
    },

    // 获取提现明细列表
    getOutList() {
      let params = {
        status: this.valueType,
        level: 0,
        page:this.page,
        pagesize:this.pagesize
      };
      this.$http.post("/api/admin/Wallet/CashOutList", params).then((res) => {
        console.log(res, "提现明细列表");
        if (res.code == 1) {
          this.tableList = res.data.list ? res.data.list : [];
          this.total = res.data.order_count?res.data.order_count:0
        }
      });
    },

    // 获取可提现明细与待结算列表
    getOrderOut(sta) {
      let params = {
        status: sta,
        sta_date: this.startDate,
        end_date: this.endDate,
        page:this.page,
        pagesize:this.pagesize
      };
      this.$http.post("/api/admin/Wallet/moneydetail", params).then((res) => {
        console.log(res, "可提现明细与待结算列表");
        if (res.code == 1) {
          this.tableList = res.data.list.list ? res.data.list.list : [];
          this.order_count = res.data.list.order_count;
          this.total = res.data.list.order_count;
          this.income_sum = res.data.list.income_sum;
        }
      });
    },

    // 获取余额信息
    getBalance() {
      this.$api.balanceInfo({ level: 0 }).then((res) => {
        console.log(res, "余额信息");
        if (res.code == 1) {
          this.balanceInfo = res.data ? res.data : {};
        }
      });
    },

    // 提现按钮
    toRecords() {
      if (!this.amountValue) {
        this.$message.warning("请输入提现金额");
        return;
      }
      if (!this.bankValue) {
        this.$message.warning("请选择提现银行卡");
        return;
      }
      let params = {
        amount: this.amountValue,
        card_id: this.bankValue,
        level: 0,
      };
      this.$http.post("/api/admin/Wallet/CashOut", params).then((res) => {
        console.log(res, "提现结果");
        if (res.code == 1) {
          this.$message.success("已提交提现申请");
          this.amountValue = null;
          this.bankValue = null;
        } else {
          this.$message.warning(res.msg);
        }
      });
    },

    // 获取已绑定银行卡
    getBindCard() {
      let params = {
        level: 0,
      };
      this.$http.post("/api/admin/Bank/binded", params).then((res) => {
        console.log(res, "已绑定银行卡列表");
        if (res.code == 1) {
          res.data.bank_list.map((item) => {
            item.bank_name =
              item.bank_name + "（" + item.card_no.substr(-4) + "）";
          });
          this.options = res.data.bank_list ? res.data.bank_list : [];
          console.log(this.options, "已绑定银行卡列表");
        }
      });
    },

    // 提现金额输入验证
    outPrice(e) {
      // console.log(e);
      // let amount = this.amountValue;
      // amount= /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(amount) ? amount : amount.substring(0,amount.length-1)
      // setTimeout(() => {
      // 	this.amountValue = Number(amount);
      // }, 1);

      // //如果用户第一位输入的是小数点，则重置输入框内容
      if (this.amountValue != "" && this.amountValue.substr(0, 1) == ".") {
        this.amountValue = "";
      }
      this.amountValue = this.amountValue.replace(/^0*(0\.|[1-9])/, "$1"); //粘贴不生效
      this.amountValue = this.amountValue.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
      this.amountValue = this.amountValue.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
      this.amountValue = this.amountValue
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      this.amountValue = this.amountValue.replace(
        /^(\-)*(\d+)\.(\d\d).*$/,
        "$1$2.$3"
      ); //只能输入两个小数
      if (this.amountValue.indexOf(".") < 0 && this.amountValue != "") {
        //以上已经过滤，若无小数点，首位不能为类似于 01、02的金额
        if (
          this.amountValue.substr(0, 1) == "0" &&
          this.amountValue.length == 2
        ) {
          this.amountValue = this.amountValue.substr(
            1,
            this.amountValue.length
          );
        }
      }
    },

    // 全部提现
    toOutAll() {
      this.amountValue = this.balanceInfo.cashout_amount;
    },

    // 多选
    handlerCheckbox(i) {
      console.log(i);
      let arr = this.checkBoxAll;
      if (arr.includes(i)) {
        let index = arr.indexOf(i);
        if (index != -1) {
          arr.splice(index, 1);
          this.shelvesAlls.splice(index, 1);
          if (this.checkBoxAll.length !== this.tableList.length) {
            this.checkAll = false;
          }
        }
      } else {
        this.checkBoxAll.push(i);
        this.shelvesAlls.push(this.tableList[i].id);
        if (this.checkBoxAll.length == this.tableList.length) {
          this.checkAll = true;
        }
      }
      console.log(this.shelvesAlls);
    },
    // 全选与全不选
    handerCheckAll() {
      this.checkAll = !this.checkAll;
      let arr = this.tableList.length;
      this.checkBoxAll = [];
      this.shelvesAlls = [];
      if (this.checkAll) {
        for (let i = 0; i < arr; i++) {
          this.checkBoxAll.push(i);
        }
        this.checkBoxAll.map((v) => {
          this.shelvesAlls.push(this.tableList[v].id.toString());
        });
      } else {
        this.checkBoxAll = [];
        this.shelvesAlls = [];
      }
      console.log(this.shelvesAlls);
    },

    handleSizeChange(val) {
      this.pagesize = val;
      this.page = 1
      if (this.activeName == "2") {
        this.getOrderOut(1);
      } else if (this.activeName == "3") {
        this.getOutList();
      } else if (this.activeName == "4") {
        this.getOrderOut(0);
      }
    },
    handleCurrentChange(val) {
      this.page = val;
      if (this.activeName == "2") {
        this.getOrderOut(1);
      } else if (this.activeName == "3") {
        this.getOutList();
      } else if (this.activeName == "4") {
        this.getOrderOut(0);
      }
    },

    // // 饼图
    // myChart(){
    //     let myChart = this.$echarts.init(document.getElementById('main'));
    //     myChart.setOption({
    //         title: {
    //             text: '',
    //             subtext: '',
    //             left: ''
    //         },
    //         tooltip: {
    //             trigger: 'item'
    //         },
    //         legend: {
    //             orient: 'vertical',
    //             left: 'right',
    //         },
    //         series: [
    //             {
    //                 name: '访问来源',
    //                 type: 'pie',
    //                 radius: '50%',
    //                 data: [
    //                     {value: this.balanceInfo.cashout_amount, name: '收入', itemStyle:{color: '#409EFF'}},
    //                     {value: this.balanceInfo.commission_amount, name: '佣金', itemStyle:{color: '#8ec060'}}
    //                 ],
    //                 emphasis: {
    //                     itemStyle: {
    //                         shadowBlur: 10,
    //                         shadowOffsetX: 0,
    //                         shadowColor: 'rgba(0, 0, 0, 0.5)'
    //                     }
    //                 }
    //             }
    //         ]
    //     })
    // },
  },
};
</script>

<style lang="less" scoped>
@import "distriMoney.less";
@import "@/assets/iconfont/iconfont.less";
</style>
